<template>
  <div class="container">
    <manageExcel ref="openDom" :updataExcel="updataExcel" @transmitDom="transmitDom"></manageExcel>
    <button @click="updata" class="btn">更新数据</button>
  </div>
</template>

<script setup>
  import { onMounted, ref, reactive, computed } from 'vue'
  import { alignHeaders, addClassesToRows } from '/src/hooks/hooks-callbacks'
  import manageExcel from '/src/views/excel/editExcel/components/manageExcel'
  import { excelData } from '/src/utils/excelDataArrObject'
  const updataExcel = ref({
    data: excelData,
    colWidths: [170, 222, 130, 120, 120, 140, 156],
    colHeaders: ['Company name','Name','Sell date','In stock','Qty','Order ID','Country'], 
    columns: [
      { data: 'checked', type: 'checkbox', className: 'htCenter' },
      { data: 'companyName', type: 'text' },
      { data: 'name', type: 'text' },
      { data: 'sellDate', type: 'date', allowInvalid: false },
      { data: 'inStock', type: 'checkbox', className: 'htCenter' },
      { data: 'orderId', type: 'text' },
      { data: 'country', type: 'text' },
    ],
    dropdownMenu: true,
    hiddenColumns: { indicators: true },
    contextMenu: true,
    multiColumnSorting: true,
    filters: true,
    rowHeaders: true,
    afterGetColHeader: alignHeaders,
    beforeRenderer: addClassesToRows,
    manualRowMove: true,
    language: "zh-CN",
    licenseKey: "non-commercial-and-evaluation"
  })
  const openDom = ref(null)
  const updata = () => {
    console.log(openDom.value);
    updataExcel.value = {
      data: excelData,
      colWidths: [170, 222, 130, 120, 120, 140, 156],
      colHeaders: ['Company name','Name','Sell date','In stock','Qty','Order ID','Country'], 
      columns: [
        { data: 'checked', type: 'checkbox', className: 'htCenter' },
        { data: 'companyName', type: 'text' },
        { data: 'name', type: 'text' },
        { data: 'sellDate', type: 'date', allowInvalid: false },
        { data: 'inStock', type: 'checkbox', className: 'htCenter' },
        { data: 'orderId', type: 'text' },
        { data: 'country', type: 'text' },
      ],
      dropdownMenu: true,
      hiddenColumns: { indicators: true },
      contextMenu: true,
      multiColumnSorting: true,
      filters: true,
      rowHeaders: true,
      afterGetColHeader: alignHeaders,
      beforeRenderer: addClassesToRows,
      manualRowMove: true,
      language: "zh-CN",
      licenseKey: "non-commercial-and-evaluation"
    }
    transmitDom()
  }
  const transmitDom = (dom) => {
    console.log(dom);
  }
</script>

<style lang="scss" scoped>
  .container {
    display: flex;
    flex-wrap: wrap;
    ::-webkit-scrollbar {
      width: 0 !important;
    }
    ::-webkit-scrollbar {
      width: 0 !important;height: 0;
    }
    .btn {
      z-index: 9999;
    }
  }
</style>